<template>
  <div class="login_warp">
    <div class="loginBox">
      <el-form
        class="container"
        :model="loginData"
        ref="loginFormRef"
        :rules="rules"
      >
        <div class="login-title">
          <div class="imgBox">
            <img
              src="../assets/7f2d36f9a8d81f7dc410a687878e7916_u7642.png"
              alt=""
            />
          </div>
          <div class="titleBox">
            <h1>路边停车管理系统</h1>
            <p>Parking Management</p>
          </div>
        </div>
        <div class="login-input">
          <el-form-item class="inputBox" prop="username">
            <span
              ><el-icon><User /></el-icon
            ></span>
            <input
              v-model="loginData.username"
              type="text"
              placeholder="请输入用户名称"
            />
          </el-form-item>
          <el-form-item class="inputBox" prop="password">
            <span
              ><el-icon><Key /></el-icon
            ></span>
            <input
              v-model="loginData.password"
              type="password"
              placeholder="请输入登录密码                                                                                                         "
            />
          </el-form-item>
        </div>
        <div class="info">
          <p>{{ message }}</p>
        </div>
        <div class="loginBtn">
          <el-button type="info" @click="submitForm(loginFormRef)"
            >登录</el-button
          >
        </div>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  defineComponent,
  // getCurrentInstance,
  reactive,
  toRefs,
  ref,
} from "vue";
// import { InitData } from "../types/login";
// import type { FormInstance } from "element-plus";
import { login } from "../http/api";
import { FormInstance } from "element-plus";
import { useRouter } from "vue-router";

var message = ref("")
const router = useRouter();
const loginFormRef = ref<FormInstance>();
const loginData = reactive({
  username: "",
  password: "",
});
const rules = {
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 6, max: 24, message: "请输入正确的用户名", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 24, message: "请输入正确的密码", trigger: "blur" },
  ],
};
// const loginFormRef = ref<InstanceType<typeof InstanceType> | null>(null)
// const submitForm = (loginFormRef: FormInstance) => {
//   data.loginFormRef?.validate((valid: boolean) => {
//     if (valid) {
//       console.log(data.loginFormRef);

//       alert("验证通过");
//       login(data.loginData).then((res) => {
//         console.log(res);
//       });
//     }
//   });
// };
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  console.log(formEl);
  await formEl.validate((valid, fields) => {
    if (valid) {
      // router.push("/home");
      login(loginData).then((res:any) => {
        console.log("res", res);
        console.log('请求成功');
        
        if (res.code === 200) {
          console.log('登录成功');
          localStorage.setItem("token", res.data.token);
          router.push("/home/firstPage");
        }
      }).catch((err)=>{
       console.log(err);
       message.value = err.msg
      })
    } else {
      console.log("错误！登录失败", fields);
    }
  });
};
</script>

<style>
* {
  box-sizing: border-box;
}
.login_warp {
  height: 100vh;
  width: 100%;
  background: url(../assets/31ca652d826dc7ce865a1ffd82e3f6a5_u7622_state0.jpg)
    no-repeat;
  /* background-attachment: scroll; */
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loginBox {
  width: 100%;
  height: 350px;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.login-title {
  display: flex;
  height: 100px;
}
.imgBox {
  width: 80px;
  height: 80px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}
.titleBox {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #fff;
}
.titleBox h1 {
  margin-bottom: 10px;
  font-size: 40px;
}
.titleBox p {
  font-size: 20px;
}
.login-input {
  margin-top: 20px;
  display: flex;
}
.inputBox {
  margin: 0 8px;
  background-color: #fff;
  width: 300px;
  height: 50px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.inputBox:hover {
  border: 2px solid rgb(0, 121, 254);
}
.inputBox input {
  height: 45px;
  width: 220px;
  border: 0;
  padding: 1px;
  outline: none;
  box-sizing: border-box;
}
.inputBox span {
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
  height: 100%;
  width: 650px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.loginBtn {
  margin-top: 20px;
}
.loginBtn .el-button {
  width: 80px;
  height: 30px;
  background-color: rgb(21, 39, 74);
}
.el-form-item__error {
  margin-top: 5px;
  margin-left: 50px;
  color: rgb(255, 168, 71);
}
.info {
  width: 100%;
  margin-left: 30px;
  margin-top: 20px;
  display: flex;
  color: rgb(255, 168, 71);
}

</style>